Browsing "Older Posts"

Browsing Category "Blogger Widgets"
Facebook is the best social website in the world. Many times we used Facebook Fanpage like box on our website. Now in this tutorial we know that how to add Beautiful Facebook follow button on our blogger site. It is very important for blogs and personal sites. So let's start our journey to add this.

How to Add Facebook Follow Button:

1) First login your Blogger account.
2) Then click on the Template.
3) Click on Edit HTML.
4) Click on Format template.
5) Now click Ctrl+F from the keyboard.
6) Search the following code..
<body>
or
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
7) Copy following code and paste after the above code.
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
8) Click on Save template.
9) Now click on Layout from the left side.
10) Click on Add a Gadget.
11) Scrolling your mouse then click on HTML/JavaScript.
12) Now copy following code and paste into the HTML/JavaScript box.
<div class="fb-follow" data-href="https://www.facebook.com/pages/NoxdoBlogspotCom/134633026731969" data-width="450" data-show-faces="true"></div>
Note:
>> Replace https://www.facebook.com/pages/NoxdoBlogspotCom with your Facebook profile or fan page url.
>> Replace width 450 as you like.
>> If you want to hide the profile photo below the button replace true with false.
13) After completing click on Save and see your zigzag site.
Some Important Another Blogger Posts:  
Jquery Stylish Featured Post Slideshow for Blogger/Blogspot Site 
Add New Style Facebook Comments Box in Blogger Blogs 
12 Stylish Beautiful Blogger/Blogspot Search Box
Tags:

How to Add Beautiful Facebook Follow Button on Your Blogger Site

By Unknown → Saturday, 7 September 2013
1 comments
Labels:
Facebook has recently released many plugins for websites and blogs. Now Facebook developer's released "Facebook Comment Box". That's awesome to creating comment system on your blogger/blogspot blog. With facebook comments box, Your bloggers user able to comment on your blog posts and those post comment automatically share on their facebook comment wall.

Final Project:
facebook blogger comment box
See our latest tutorial about it by below link

How to Add New Responsive Facebook Comment Box to Blogger
Tags: →

Add New Style Facebook Comments Box in Blogger Blogs

By Unknown → Tuesday, 30 July 2013
44 comments
Labels: ,
Today I picked up 12 stylish beautiful search box for your blogger/blogspot site. I hope you'll love. All search box created by using CSS3 and HTML. You can easily customize as your own. So let's get started.

How to Add:
Login>Blogger Dashboard>Layout>Add a Gadget>HTML/Javascript.

Then choose one of the search box, copy search box code and paste into your HTML/Javascript box.

Search Box Code:

1) Clean Search Box:
clean blogger search box
    <style>
#nbc-searchsimplebox1
{
padding:10px;
}
#nbc-searchsimplesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchsimpleinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='nbc-searchsimple1'>
         <form expr:action='/search/max-results=8'  method='get' id="nbc-searchsimplebox1">
            <input name='q' id='nbc-searchsimpleinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='nbc-searchsimplesubmit1' type='submit' value='Search'/>
         </form>
      </div>
2) Dynamic width (Expandable) Search box:
Generally:
dynamic blogger search box
After mouse hover effect:
dynamic blogger search
<style>
#nbc-searchexpandbox1
{
padding:10px;
}
#nbc-searchexpandsubmit1
{
border:1px solid #111111;
background: #111111;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchexpandinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #dcdcdc;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
-o-transition: width 2s; /* Opera*/
-moz-transition: width 2s; /* firefox*/
width:65px;
}
#nbc-searchexpandinput1:hover
{
width:200px;
}
</style>
<div id='nbc-searchexpand1'>
         <form expr:action='/search/max-results=8'  method='get' id="nbc-searchexpandbox1">
            <input name='q' id='nbc-searchexpandinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='nbc-searchexpandsubmit1' type='submit' value='Search'/>
         </form>
      </div>
3) Elegant green Search box:
elegant green blogger search
<style>
#nbc-searchgreen1
{
background: rgb(143,196,0); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(143,196,0,1) 0%, rgba(143,196,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(143,196,0,1)), color-stop(100%,rgba(143,196,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(143,196,0,1) 0%,rgba(143,196,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}
#nbc-searchgreenbox1
{
padding:10px;
}
#nbc-searchgreensubmit1
{
border:1px solid green;
background: green;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchgreeninput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='nbc-searchgreen1'>
         <form expr:action='/search/max-results=8'  method='get' id="nbc-searchgreenbox1">
            <input name='q' id='nbc-searchgreeninput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='nbc-searchgreensubmit1' type='submit' value='Search'/>
         </form>
      </div>
4) Easy blue Search box:
easy blue blogger search box
<style>
#nbc-searchblue1
{
background: rgb(37,141,200); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(37,141,200,1) 0%, rgba(37,141,200,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(37,141,200,1)), color-stop(100%,rgba(37,141,200,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(37,141,200,1) 0%,rgba(37,141,200,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#258dc8', endColorstr='#258dc8',GradientType=0 ); /* IE6-9 */
border-radius:10px;
width:290px;
}
#nbc-searchbluebox1
{
padding:10px;
}
#nbc-searchbluesubmit1
{
border:1px solid orange;
background: orange;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchblueinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='nbc-searchblue1'>
         <form expr:action='/search/max-results=8'  method='get' id="nbc-searchbluebox1">
            <input name='q' id='wc-searchblueinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='nbc-searchbluesubmit1' type='submit' value='Search'/>
         </form>
      </div>
5) Dark black Search box:
Dark black blogger Search box
<style>
#nbc-searchblack1
{
background: #222222;
border-radius:10px;
width:290px;
}
#nbc-searchblackbox1
{
padding:10px;
}
#nbc-searchblacksubmit1
{
border:1px solid #222222;
background: #dc4523;
padding:5px;
color:#ffffff;
font:14px verdana;
}
#nbc-searchblackinput1
{
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
border:1px solid #ffffff;
background:#ffffff;
padding:5px;
color:#888888;
font:14px verdana;
}
</style>
<div id='nbc-searchblack1'>
         <form expr:action='/search/max-results=8'  method='get' id="nbc-searchblackbox1">
            <input name='q' id='nbc-searchblackinput1' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
            <input id='nbc-searchblacksubmit1' type='submit' value='Search'/>
         </form>
      </div>
6) White color Search box:
White color blogger Search box
<style>
#MBBOldSearch {
display: block;
clear: both;
margin: 10px 0;
}
#MBBOldSearch #MBBSinput {
background: url("<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9NBWM5Bg5t5MoKT1Q0W6ypNdxgW-MbHscivflZog8QwRfv6yTIHZTObVgmB4ToMd5yxoypA4DLVAosWr6oj9NJw7Cq9kwZZSooI-Fpt2N9lMmmeHibBbyeTE4ozlyqjV63_r4Ms6Wz00/s1600/noxdo_blogspot_com_Search-icon.png&quot" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXcu7mXgkPCPMylQONxsL41K8ogbzhkzV7VUOPFHk5Uvhtn8MAobLzuwz8c9wW-Sy5so8lt_xPfqCpqId3TJx0MVm1uJBeQAuKS3eaV8SHPqWqdJEqq9F5_91LpK1oVmRRrGffz2g-ag/s1600/noxdo_blogspot_com_Search-icon1.png&quot']);" rel="nofollow">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPEj0jx8qln_MOockIpV14jPLYSXB8EuffFF2GbazHAxtL46a-CPVagg__WZyH8QQOyyd-4x-UwREjWpbYAm0MMLYCYQ2Os9i_nD9Gy8JkOWEP3OUHCE5F0pxjbMS6yqVtjV0HDiJwZHCR/s20/Search-icon.png&quot</a>;) no-repeat scroll 8px center transparent !important;
padding: 7px 15px 7px 35px !important;
color: #444;
font-weight: bold;
text-decoration: none;
border: 1px solid #D3D3D3 !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
-moz-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width: 52%;
}
#MBBOldSearch #MBBSsubmit {
color: #444;
font-weight: bold;
text-decoration: none;
padding: 6px 15px;
border: 1px solid #D3D3D3;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>
 <div id="MBBOldSearch">
    <form action="/search/max-results=8">
        <input name="q" id="MBBSinput" type="text" />
        <input value="Search" id="MBBSsubmit" type="submit" />
    </form>
</div>
7) Stylish floating Search box:
It's always show at the top of right.
<style type='text/css'>
/*<![CDATA[*/
#sbutton {
background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;
border: 1px solid #3079ED;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
height: 27px;
min-width: 76px;
padding: 0 21px;padding-bottom: 2px;
}
#sbutton:hover{    background-color: #357AE8;
background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
border: 1px solid #2F5BB7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
#simg {
background: url("<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVZdGZef03euieUsqIDf-GEeA2tVN-QoTzBSR6yRXTaZNvYTMuMzWgKPeIC1lxIV66HowwCFqbuI6pkUCMe0KUVEPKhpfZUNCwOSEThCG7wAg-ydDlYbBB-2LyJTZr78iEk1FdcgoblFc/s1600/noxdo_blogspot_com_Search-icon2.png&quot" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVZdGZef03euieUsqIDf-GEeA2tVN-QoTzBSR6yRXTaZNvYTMuMzWgKPeIC1lxIV66HowwCFqbuI6pkUCMe0KUVEPKhpfZUNCwOSEThCG7wAg-ydDlYbBB-2LyJTZr78iEk1FdcgoblFc/s1600/noxdo_blogspot_com_Search-icon2.png&quot']);" rel="nofollow">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPfkcrexEAUUMbtpKPW6t3DSFMM74oM-FdqC7e0emSZi3U4sQhDEYmf0lw0tgjJOH0Hi9etFJqN6XWt0jn4dPTp3ZCHkqxTSrFFkD7OzjerlO5if4pELgROBV0X6pNakamGhK3i-_KDPzc/s1600/searchicon.png&quot</a>;) no-repeat scroll 0 0 transparent;
display: inline-block;
height: 14px;
margin: 0;
width: 17px;z-index:101;
}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
#s:focus {width: 200px;}
.noop-searchbox {
display: block;
position: fixed;
right: 12px;
top: 1%;
max-width: 300px;min-width: 238px;
z-index: 100;
}
/*]]>*/
</style>
<div class='noop-searchbox' id='noop-searchbox'>
<form action='/search/max-results=8' id='noop-searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search...";}' onfocus='if (this.value == "Search...") {this.value = ""}' type='text' value='Search...'/>
<button id='sbutton' type='submit'><span id='simg'></span></button>
</form></div>
8) Round corner Search box:
Round corner blogger Search box
<style>
#search-form {
background: #e1e1e1; /* Fallback color for non-css3 browsers */
width: 365px;
background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));
background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);
border-radius: 17px; -webkit-border-radius: 17px; -moz-border-radius: 17px;
box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3); }
input[type="text"]{
background: #fafafa;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);
border: 0; border-bottom: 1px solid #fff;
border-right: 1px solid rgba(255,255,255,.8);
font-size: 16px; margin: 4px; padding: 5px; width: 250px;
border-radius: 17px; -webkit-border-radius: 17px; -moz-border-radius: 17px;
box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2); }
input[type="text"]:focus{outline: none; background: #fff;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));
background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%); }
input[type="submit"]{
background: #44921f;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));
background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);
border: 0; color: #eee; cursor: pointer;
float: right; font: 16px Arial, Helvetica, sans-serif; font-weight: bold; height: 30px;
margin: 4px 4px 0; text-shadow: 0 -1px 0 rgba(0,0,0,.3); width: 84px; outline: none;
border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px;
box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4); }
input[type="submit"]:hover {
background: #4ea923;background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%); }
input[type="submit"]:active {
background: #4ea923;background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22))); background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%); }
</style>
<form action="/search/max-results=8" id="searchbox">
<input name="cx" type="hidden" value="X:Y" />
<input name="cof" type="hidden" value="FORID:11" />
<input id="q" name="q" size="70" type="text" />
<input name="sa" type="submit" value="Search" />
</form>
9) Black and white color Search box:
Black and white color blogger Search box
<style type="text/css">
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg53L2k091jds8gj9UBf1JNYTzswwIzojwi-b_lo23mIBxcQG3fbfaXataOCE1HFwFVc54N1ATCws7ZAs61I8zic2uqMKdtBYz2-CwxKIzWO28LMZHlzKfICBo_IPIuWrB-hZr4Jvn7hKE/s1600/noxdo_blogspot_com_Search-icon3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 10px 12px;margin:0;}
form#nbc-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="nbc-searchbox">
<form id="nbc-searchform" action="/search/max-results=8" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
</form>
</div>
10) White Search box:
White blogger Search box
<style type="text/css">
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKJqRzqFkun0y5xVgU07fBw04VajS4vchfwY0V6dJz2_YOcRF-8X8DlI-9dWbkvHyxPHjk1cisq2CdZiZ83JV3QKQTjbp3Vd7Vp12q68Rh4eeGbLQpj2VOLw2AHpXO-Q80KnxAhTVx5cg/s1600/noxdo_blogspot_com_Search-icon4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 12px;margin:0;}
form#nbc-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="nbc-searchbox">
<form id="nbc-searchform" action="/search/max-results=8" method="get">
    <input type="text" id="s" name="q" value=""/>
</form>
</div>
11) Grew color Search box:
Grew color blogger Search box
<style type="text/css">
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-iopHcfw_8TyU5-_cPLVoeOUdhdFoK_mX9YLKVtxDyv_crs97M9PrY16uq-RgzgaTw58hsw1U1xd16Ke1CyjQLz03fyejhcddtPw5AoydnIJD0KHenLbBpXgT1rZzOSPk23ZmtRmrdRM/s1600/noxdo_blogspot_com_Search-icon5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 12px;margin:0;}
form#nbc-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="nbc-searchbox">
<form id="nbc-searchform" action="/search/max-results=8" method="get">
    <input type="text" id="s" name="q" value=""/>
</form>
</div>
12) Red color Search box:
Red color blogger Search box
<style type="text/css">
#nbc-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeejWFPWyzxoyR4wD2G3jB_fp5LYRLW59x7PChngklNb1Hh5ebT3InGTEEbI6wJw7PidXjdpKppgCE_BM9utAfAkjPb6tVY3XJOdJFQEd4FPSXvzGxwzjZUESVPvMCsmGJKas4EQA8wgw/s1600/noxdo_blogspot_com_Search-icon6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#nbc-searchform{display: block;padding: 10px 12px;margin:0;}
form#nbc-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#nbc-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="nbc-searchbox">
<form id="nbc-searchform" action="/search/max-results=8" method="get">
    <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
</form>
</div>
Post: You can also view..
        Jquery Stylish Featured Post Slideshow for Blogger
Tags:

12 Stylish Beautiful Blogger/Blogspot Search Box

By Unknown → Tuesday, 23 July 2013
6 comments
Labels:
Let's look what's facility you achieve to add Google plus comment widget on your blogger/blogspot blog.
  • No Login: Most of the users are using a Google gmail service. So when your reader already logged into their gmail account, they don't need to add details like website address, name, email etc to comment on. So it's easy for your website to get more comment on your post.  
  • More Comments: This system is more attractive to blogspot user. Because when people will comment on the linked post on Google Plus, those comments automatically displayed on your blogspot blog and also your website post comment automatically displayed on your Google plus linked post. So always That's help your website to be active on Google Plus.
  • Social Media: Google plus comment system helps your website comment to share social media website like Google. That's good for your website to increase SEO ranking and get huge visitor.
Now if you have associated your blogspot blog with your google plus profile, you can easily add Google Plus Comment Widget to your blogger/blogspot blog. Just follow my simple instruction to add this on your blog.
 Step 1: Go to Blogger Dashboard then login with your account.

Step 2: Click on Google+ then ticks on "Use Google+ Comment on this blog"
Now you are done. See your website post. Thanks for reading.
Wait for our next article.
Tags:

Easily Add Google Plus Comments Widget to your Blogger Blog

By Unknown → Friday, 14 June 2013
3 comments
Labels:
Subscribe to: Posts ( Atom )